<template>
  <a-card :bordered="false">
    <!--表头条件搜索  -->
    <a-form-model layout="inline" :model="transform">
      <a-form-model-item
        ><a-input placeholder="请输入交易码" style="width: 150px" v-model="transform.transCode"></a-input
      ></a-form-model-item>
      <a-form-model-item>
        <a-select placeholder="请选择交易状态" v-model="transform.transStatus" style="width: 150px">
          <a-select-option v-for="(tranStatus, index) in tranStatusList" :key="index + 1">{{
            tranStatus.statusName
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
        ><a-button type="primary" icon="search" @click="handleSubmit">搜索</a-button></a-form-model-item
      >
      <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
        ><a-button type="primary" icon="sync" @click="resetForm">重置</a-button></a-form-model-item
      >
    </a-form-model>
    <br />
    <!-- 主体表格内容 -->
    <div style="margin-bottom: 16px">
      <a-upload name="file" :file-list="fileList" :before-upload="beforeUpload" :customRequest="handleUpload" :remove="handleRemove">
        <a-button type="primary"> <a-icon type="upload" />交易码导入</a-button></a-upload>
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="false"
    >
    </a-table>
    <br />
    <!-- 分页组件 -->
    <a-pagination v-model="currentpage" :total="total" :pageSize="pageSize" @change="pageChange" />
    <!-- 文件上传modal -->
    
  </a-card>
</template>

<script>
import { getStore } from '@/utils/storage'
import { getTranList,getTranStatus, importTransCode } from '@/api/trans/tran'

export default {
  data() {
    return {
      fileList:[],
      tranStatusList: [],
      currentpage: 1,
      total: 0,
      pageSize: 8,
      transform: {},
      data: [],
      columns: [
        { title: '交易码', dataIndex: 'transCode', key: 'transId' },
        { title: '交易名称', dataIndex: 'transName', key: 'tranName' },
        { title: 'ESB服务ID', dataIndex: 'esbId', key: 'serverId' },
        { title: 'ESB服务器名称', dataIndex: 'esbName', key: 'serverName' },
        { title: '交易状态', dataIndex: 'transStatus', key: 'tranStatus' },
      ],
    }
  },

  created() {
    this.getTranStatusList()
    this.getTransData()
    //this.loadData();
    //this.initDictConfig()
  },

  methods: {

    handleRemove(file) {
      this.fileList=[];
    },

    beforeUpload(file) {
      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1);
      var isXlsxOrXls = (fileName != 'xlsx' && fileName != 'xls');
      var fileLength=(this.fileList.length>0);
      if(fileLength){
        this.$message.error('只能上传一张表格!');
      }else if (isXlsxOrXls) {
        this.$message.error('文件类型必须是xls或xlsx!')
      }else{
        this.fileList = [...this.fileList, file];
        return true
      }
      return false;
    },

    handleUpload() {
      let formData = new FormData();
      formData.append('file', this.fileList[0]);
      formData.append('importBy',getStore('pro__Login_Username').value);
      console.log('1',this.fileList[0]);
      importTransCode(formData).then(res=>{
        if(res.code==200){
          this.fileList=[];
          this.uploading = false;
          this.$message.success(res.result);
        }else{
          this.uploading = false;
          this.$message.error('文件导入失败！');
          this.fileList=[];
        }
      })
    },

    pageChange() {
      this.selectedRowKeys = []
      getTranList(this.transform, this.currentpage, this.pageSize).then((res) => {
        //console.log(res);
        this.total = res.result.total
        this.data = res.result.trans
      })
    },

    handleSubmit() {
      getTranList(this.transform, 1, this.pageSize).then((res) => {
        //console.log(res);
        this.total = res.result.total
        this.data = res.result.trans
      })
    },

    resetForm() {
      this.selectedRowKeys = []
      this.transform = {}
      getTranList(this.transform, 1, this.pageSize).then((res) => {
        //console.log(res);
        this.total = res.result.total
        this.data = res.result.trans
      })
    },

    onSelectChange(selectedRowKeys) {
      //console.log("text",selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
    },

    getTranStatusList() {
      getTranStatus().then((res) => {
        this.tranStatusList = res.result
      })
    },

    getTransData() {
      getTranList(this.transform, this.currentpage, this.pageSize).then((res) => {
        //console.log(res);
        this.total = res.result.total
        this.data = res.result.trans
      })
    },
  },
}
</script>
